@charset 'utf-8';
@import 'common/base';


.web {
	.content-box {
		.redeem-box {
            width: 100%;
            height: r(830);
            background-image: url(../img/lotto-rule-mainbg.png);
            background-size: 100% 100%;
            position: relative;
            .redeem-title {
            	width: r(340);
            	height: r(85);
            	position: absolute;
            	top: r(145);
            	left: r(152);
            	overflow: hidden;
            	img {
            		width: 100%;
            	}
            }
            .redeem-prize {
            	width: r(285);
            	height: r(371);
            	overflow: hidden;
            	position: absolute;
            	top: r(250);
            	left: r(180);
            	img {
            		width: 100%;
            	}
            }
            .redeem-btn {
            	width: r(508);
            	height: r(110);
            	overflow: hidden;
            	position: absolute;
            	bottom: r(45);
            	left: r(67);
            	img {
            		width: 100%;
            	}
            }
		}

		.award-box {
			width: 100%;
	        height: r(830);
	        // background-image: url(../img/lotto-rule-mainbg.png);
	        background-size: 100%;
	        position: absolute;
	        top: r(208);
	        z-index: 999;
	        transition: 0.3s;
	        display: none;
			.award-msg {
	        	width: r(584);
	            height: r(773);
	            background-image: url(../img/lotto-rule-bg.png);
	            background-size: 100%;
	            box-shadow: 0px 4px 4px #2d0a12;
	            position: absolute;
		        left: r(32);
		        top: r(-37);
		        z-index: 1000;
		        .msg {
		        	font-size: r(30);
		        	font-weight: bolder;
		        	line-height: r(40);
		        	color: #7d4611;
		            margin: r(245) 0 0 r(55);

		            #prizeName {
		            	color: orange;
		            }
		        }

		        .code {
		        	width: r(220);
		        	height: r(220);
		        	overflow: hidden;
		        	margin: r(40) 0 0 r(180);
		        	img {
		        		width: 100%;
		        	}
		        }

		        h5 {
		        	font-size: r(28);
		        	color: #7d4610;
		        	margin: r(40) 0 0 r(200);
		        }

		        .close {
	            	width: r(73);
	            	height: r(73);
	            	border-radius: 50%;
	            	background: #ffffff;
	            	position: absolute;
	            	right: r(-20) ;
	            	top: r(-30);
	            	p {
	            		text-align: center;
	            		i {
	            			font-size: r(38);
	            			line-height: r(73);
	            			color: #6b0000;
	            		}
	            	}
	            }

	            .msg-logo {
	            	width: r(175);
	            	height: r(45);
	            	margin: r(40) auto 0;
	            	img {
	            		width: 100%;
	            	}
	            }
            }
		}
	}
}